<template>
    <div class="webview container">
        <NavBar :title="title" />
        <p class="webview_title">{{title}}</p>
        <div class="webview_content" v-html="content"></div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { getNewDetailApi, getNewDetailDataApi } from '@/api/indexApi'
import { useRoute } from 'vue-router'
import { useMainStore } from '@/store'

import NavBar from '@/components/navBar/index.vue'

const route = useRoute()
const mainStore = useMainStore()

const id = ref(null)
const cid = ref(null)
const keyword = ref('')

const title = ref('')
const content = ref('')

watch(
    () => mainStore.lang,
    () => {
        getDetailData()
    }
)

watch(
    () => route.query.t,
    () => {
        id.value = Number(route.query.id)
        cid.value = Number(route.query.cid)
        keyword.value = route.query.keyword
        getDetailData()
    }
)


onMounted(() => {
    id.value = Number(route.query.id)
    cid.value = Number(route.query.cid)
    keyword.value = route.query.keyword
    getDetailData()
})

const getDetailData = async () => {
    let res = null
    if(cid.value && keyword.value) {
        res = await getNewDetailApi({
            cid: cid.value,
            keyword: keyword.value
        })
    }else {
       res = await getNewDetailDataApi({
            id: id.value
        })
    }
    if(!res) return
    title.value = res.title
    content.value = res.content
}

</script>

<style lang="scss" scoped>
 .webview {
    padding-top: 50px;
    box-sizing: border-box;
    &_title {
        font-size: 30px;
        font-weight: 600;
    }
 }
@media only screen and (max-width: 1200px) {
    .webview {
        padding-top: 20px;
    }
 }
</style>